<template>
  <div class="app-container">
    <el-container>
      <el-aside width="250px">
        <div class="search_Bar"></div>
        <div v-for="item, index in userFriendList" :key="index">
          <div class="user_Bar" @click="selectFriend(item)">
            <el-row :gutter="10">
              <el-col :span="5">
                <el-badge :value="0" class="item">
              <el-avatar shape="square" :size="44" fit="fill"
                  :src="getImg(item.avatar)"></el-avatar>
                  </el-badge>
                  </el-col>
              <el-col :span="10">
                <div class="name_div1"><span >{{ item.friendName }}</span></div>
                <div class="name_div2"><span >{{ item.lastMessage }}</span></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          Header
        </el-header>
        <el-main>
          <div>
            <div v-for="item, index in data" :key="index">
              <div class="" v-if="isMy(item.userId)">{{ item.userId }}<span>:</span>{{ item.message }}</div>
              <div class="" v-else>{{ item.message }}</div>
            </div>
          </div>

        </el-main>
        <el-footer>
          <input class="message" v-model="message" /><button @click="submit()">提交</button>
        </el-footer>
      </el-container>
    </el-container>




  </div>
</template>

<script>
import { wc } from "@/api/system/user.js";
import { getInfo } from "@/api/login.js";
import { userfriendList, selectHistory } from "@/api/system/userFriend.js";
export default {
  name: "Index",
  data() {
    return {
      //当前用户名
      user: '',
      //好友列表
      userFriendList: [],
      //当前选择的好友
      friend: '',
      websocket: null,
      data: [],
      message: '',
      //发生信息的参数
      wsMessage: {
        sendId: '',
        toName: '',
        message: ''
      },
      messagelist:{
        userId: '',
        friendId: '',
        pageNum: '',
        pageSize: '',
      }
    };
  },
  computed: {

  },

  created() {
    this.websocket = new WebSocket('ws://localhost:8081/websocket');
    this.websocket.onopen = () => {
      console.log('WebSocket连接已建立');
    },
      //获取当前用户信息
      getInfo().then(res => {
        this.user = res.user
        console.log("user-----", this.user);
      }),
      //获取好友列表
      userfriendList().then(res => {
        this.userFriendList = res.data;
        console.log("好友列表-------", this.userFriendList);
      }),


      //websocket接受消息
      this.websocket.onmessage = (message) => {
        //将该字符串数据转换为json
        var res = JSON.parse(message.data);
        if (res.message.sendId == this.user.userId) {
          console.log("接受到消息---", res);
          const newItem = { userId: this.friend.friendId, message: res.message.message };
          this.data.push(newItem)

        }

      }

  },
  methods: {
    //获取图片地址方法
    getImg(res) {
      var url = process.env.VUE_APP_BASE_API;
      return url + res;
    },
    //发送按钮
    submit() {
      // 在连接建立后发送消息
      this.wsMessage.sendId = this.friend.friendId
      this.wsMessage.toName = this.friend.friendName
      this.wsMessage.message = this.message
      this.websocket.send(JSON.stringify(this.wsMessage));

      const newItem = { userId: this.user.userId, message: this.wsMessage.message };
      this.data.push(newItem)
      for (let index = 0; index < this.userFriendList.length; index++) {
        if(this.userFriendList[index].friendId == this.friend.friendId){
          this.userFriendList[index].lastMessage = this.message
          console.log("111111111111",this.userFriendList);
          console.log("2222222222", this.userFriendList[index].lastMessage);

        }
      };
      this.message = null
    },
    //判断是否自己发送的消息
    isMy(res) {
      if (res == this.friend.friendId) {
        // 对方发来的消息 要显示对方的姓名
        return true
      } else {
        // 自己发送的信息 不需要显示姓名
        return false
      }
    },
    //选择好友
    selectFriend(friend) {
      this.data = [];
      this.messagelist={
        userId: '',
        friendId: '',
        pageNum: '',
        pageSize: '',
      }
      this.friend = friend;
      console.log("当前选择的好友：", this.friend.friendName);
      //在数据库查询聊天记录


      this.messagelist.userId = this.user.userId;
      this.messagelist.friendId = this.friend.friendId;
      this.messagelist.pageNum = 10;
      this.messagelist.pageSize = 10;
      selectHistory(this.messagelist).then(res => {
        this.data = res.data
      });

    }


  }
};
</script>

<style scoped lang="scss">
.app-container {
  height: 100%;
  /* 设置 html 和 body 的高度为 100% */
  margin: 0;
  /* 去掉默认的外边距 */
  padding: 1px;
  /* 去掉默认的内边距 */

}

.el-header {
  background-color: #f5f5f5;
  height: 65px;
  border-bottom: 2px solid #e7e7e7;
  /* 下边界黑线 */
}

.el-aside {
  background-color: #e2e0de;
  color: #333;
  text-align: justify;
  padding: 0px 0px;
  height: 100%;

  .search_Bar {
    height: 65px;
    width: 250px;
    background-color: #f5f5f5;
  }

  .user_Bar {
    height: 65px;
    width: 250px;
    padding: 10px 10px;

    .el-col-10 {
      width: 41.6666666667%;
      height: 45px;

    }

    .name_div1 {
      height: 22px;
      font-size: 110%;
      font-weight:400;
      // margin-top: -10px;
        line-height: 15px;
    }
    .name_div2 {
      height: 22px;
      line-height: 25px;
      font-weight:300;
      color: #999999;

    }
  }

  /* 设置鼠标悬停时的样式 */
  .user_Bar:hover {
    background-color: #d5d3d2;
  }
}

.el-main {
  background-color: #f5f5f5;
  text-align: left;
  height: 600px;
  padding: 0px, 30px;

}

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;

}

body>.el-container {
  margin-bottom: 40px;
}






.kk {
  height: 60px;
  width: 300px;
  background-color: antiquewhite;

}
</style>
